<template>
  <div class="content">

    <div class="search-box">
      <van-icon class="back pull-left" name="arrow-left" @click="$router.back(-1)"/>
      <van-search class="search" background="none" autofocus="true" v-model="value" placeholder="请输入搜索关键词" show-action shape="round">
        <div slot="action" class="search-btn" @click="search">搜索</div>
      </van-search>
    </div>

    <van-row class="page-block">
      <div class="inx-public-title">
        <span class="text no-bold">热门搜索</span>
      </div>
      <div class="list-cell search-key">
        <template v-for="(item,index) in hotArr">
        <router-link :to="{name:'searchList',query:{keyword: item}}" class="item">{{item}}</router-link>
        </template>
      </div>

      <div class="inx-public-title">
        <span class="text no-bold">历史搜索</span>
      </div>
      <div class="list-cell search-key">
        <template v-for="key in reverseArr" >
          <router-link :to="{name:'searchList',query:{keyword:key}}" class="item">{{key}}</router-link>
        </template>

      </div>

      <div class="inx-public-title">
        <span class="text no-bold">推荐文章</span>
      </div>
      <van-list class="list-cell search-key no-after" style="margin-top: .5rem">
        <template v-for="item in list">
        <van-cell class="item-list" :to="{name:'msgDetail',query:{id:item.article_id}}" :title="item.title" />
        </template>
      </van-list>

    </van-row>

  </div>
</template>

<script>
  import storeJs from 'storejs'

  export default {
    name: "Index",
    components: {},
    data() {
      return {
        list: [],
          hotArr:[],
          storyList:[],
          value: "",
      }
    },
    computed: {
      reverseArr() {
        return this.storyList.reverse();
      }
    },
    mounted: function () {
      this.init();
    },
    methods: {
      init() {
        if(storeJs.get("searchList")){
          this.storyList = storeJs.get("searchList")
        }

        this.$api.msg.lists(1,1,4).then(res=>{
            var res=res.data;
            this.list=res.data.list.data;
        });

        this.$api.index.getHotKey().then(res=>{
            var res=res.data;

            this.hotArr=res.data.search_hot;
        });
      },
      search(){
        let key = this.value;
        let storyList = storeJs.get("searchList");
        if(storyList){
          if(storyList.indexOf(key) === -1){
            if(storyList.length > 10){
              storyList.splice(0, 1)
            }
            storyList.push(key)
          }

        } else {
          storyList = [key];
        }

        storeJs.set("searchList",storyList);
        this.$router.replace({
          path: '/search_list',
          query: {
            keyword: key
          }
        });
      },

    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
</style>
